<template>
    <div class="titlebox"></div>
    <div class="supresulttitle"></div>
    <div class="superitem">
        <div class="item">
            <img src="../../../assets/编组 28.png" alt="" class="i-left">
            <div class="i-right">
                <p>计划招募人数</p>
                <div class="number">
                    <span class="text1 setColor">5</span>
                    <span class="text2 setColor">人</span>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="../../../assets/编组 28(1).png" alt="" class="i-left">
            <div class="i-right">
                <p>报名人数</p>
                <div class="number">
                    <span class="text1 setColor">95</span>
                    <span class="text2 setColor">人</span>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="../../../assets/编组 28(2).png" alt="" class="i-left">
            <div class="i-right">
                <p>系统筛选人数</p>
                <div class="number">
                    <span class="text1 setColor">12</span>
                    <span class="text2 setColor">人</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">

</script>

<style lang="less" scoped>
.titlebox{
    width: 100%;
    height: 44px;
    background-image: url("../../../assets/编组 2.png");
    background-size: 100% 100%;
}
.supresulttitle{
    width: 100%;
    height: 36px;
    margin-top: 9px;
    background-image: url("../../../assets/二级标题备份 2.png");
    background-size: 100% 100%;
}
.superitem{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 9px;
    .item{
        height: 59px;
        display: flex;
        .i-left{
            width: 58px;
            height: 59px;
            // transition: opacity 0.5s ease; /* 平滑过渡效果 */
            cursor: pointer;
            opacity: 0.7;
        }
        .i-left:hover {
            opacity: 1; /* 鼠标悬停时变为半透明 */
        }
        .i-right{
            width: 119px;
            height: 58px;
            background-image: url("../../../assets/矩形.png");
            background-size: 100% 100%;
            box-sizing: border-box;
            padding: 5px 0 0 8px;
            p{
                font-family: PingFangSC-Regular;
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;
            }
            .number{
                width: 100%;
                .text1{
                    font-size: 22px;
                    font-weight: bold;
                }
                .text2{
                    font-size: 12px;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>
